{extend name="./view/base/admin.html" /}
{block name="head"}
<link rel="stylesheet" href="/static/jstree/themes/default/style.css">
{/block}
{block name="body"}
<style>
    #treeview .jstree-container-ul .jstree-node {
        display: block;
        clear: both;
    }

    #treeview .jstree-leaf:not(:first-child) {
        float: left;
        background: none;
        margin-left: 0;
        min-width: 80px;
        clear: none;
    }

    #treeview .jstree-leaf {
        float: left;
        padding-left: 24px;
        min-width: 80px;
        clear: none;
        color: #777;
    }

    #treeview .jstree-leaf>.jstree-icon,
    #treeview .jstree-leaf .jstree-themeicon {
        display: none;
    }

    #treeview .jstree-last {
        background-image: url("");
        background-position: -292px -4px;
        background-repeat: repeat-y;
    }

    #treeview .jstree-children:before,
    #treeview .jstree-children:after {
        content: " ";
        display: table;
    }

    #treeview .jstree-children:after {
        clear: both;
    }

    #treeview .jstree-themeicon {
        display: none;
    }
</style>
<div class="panel panel-default">
    <div class="panel-body">
        <form>
            <div class="form-group">
                <label>角色名称</label>
                <input class="form-control" type="text" name="name">
            </div>
            <div class="form-group">
                <label>选择权限</label><br>
                <label class="checkbox c-checkbox">
                    <input id="zhankai" type="checkbox" checked="">
                    <span class="fa fa-check"></span>
                    展开全部
                </label>
                <label class="checkbox c-checkbox">
                    <input id="xuanzhong" type="checkbox">
                    <span class="fa fa-check"></span>
                    选中全部
                </label>
                <div id="treeview"></div>
            </div>
            <div class="form-group">
                <label>状态</label><br>
                <label class="checkbox c-checkbox c-checkbox-rounded">
                    <input type="radio" name="status" value="1" checked="">
                    <span class="fa fa-check"></span>启用
                </label>
                <label class="checkbox c-checkbox c-checkbox-rounded">
                    <input type="radio" name="status" value="-1">
                    <span class="fa fa-check"></span>禁用
                </label>
            </div>
            <button class="btn btn-sm btn-info" type="submit">提交</button>
        </form>
    </div>
</div>
{/block}
{block name="script"}
<script src="/static/jstree/jstree.js"></script>
<script>
    var rules_list = <?=json_encode($rule_list)?>
    // var rules_list = JSON.parse('{$rule_list|json_encode}')

    $('#zhankai').on('change', function () {
        $(this).is(':checked') ? $("#treeview").jstree('open_all') : $("#treeview").jstree('close_all');
    })
    $('#xuanzhong').on('change', function () {
        $(this).is(':checked') ? $("#treeview").jstree('check_all') : $("#treeview").jstree('uncheck_all');
    })
    $('#treeview').jstree({
        "themes": { "stripes": true },
        "checkbox": {
            "keep_selected_style": false,
        },
        "types": {
            "root": {
                "icon": "fa fa-folder-open",
            },
            "menu": {
                "icon": "fa fa-folder-open",
            },
            "file": {
                "icon": "fa fa-file-o",
            }
        },
        "plugins": ["wholerow", "checkbox", "types"],
        "core": {
            'check_callback': true,
            "data": rules_list
        }
    })
    $('form').on('submit', function () {
        let data = $(this).serializeJSON();
        var get_checked = $('#treeview').jstree('get_checked');
        var get_undetermined = $('#treeview').jstree('get_undetermined');
        if (!$('#treeview').html()) {
            this.jump({ code: 0, msg: '请选择父角色' })
            return false
        }
        data.rules = get_checked.concat(get_undetermined).join(',')
        $.submit('', data)
        return false;
    })
</script>
{/block}